<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记事本</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/bootstrap/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/sweetalert.css' %}">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap/bootstrap-table.min.css' %}">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}"/>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/sweetalert-dev.js' %}"></script>
    <script src="{% static 'js/bootstrap/bootstrap-table.min.js' %}"></script>
    <script src="{% static 'js/bootstrap/bootstrap-table-zh-CN.min.js' %}"></script>
    <script src="{% static 'js/api.js' %}"></script>

    <style>
        .navTitle {
            font-weight: bold;
            font-size: large
        }
    </style>
</head>
<body >

<h1 class="nameTitle">网页记事本</h1>
<nav class="navbar nav-tabs" role="navigation">
    <ul class="nav nav-tabs">
        <li class="nav-item ">
            <a class="nav-link active" href="#mainTab" data-toggle="tab">
                <span class="navTitle">记事本</span>
                <i class="fa fa-book"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#recoverTab" data-toggle="tab">
                <span class="navTitle">回收站</span>
                <i class="fa fa-trash"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#logTab" data-toggle="tab">
                <span class="navTitle">操作记录</span>
                <i class="fa fa-archive"></i>
            </a>
        </li>
    </ul>
</nav>

<div class="tab-content">

    <!--第一个页面,注意id要和选项卡定义的href一致-->
    <div id="mainTab" class="tab-pane in active">

        <table id="mainList" class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>优先级</th>
                <th>标题</th>
                <th>正文</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for i in note %}
                <tr>
                    <td>{{ i.id }}</td>
                    {% if i.grade == 'I' %}
                        <td class="important">重要的</td>
                    {% elif i.grade == 'C' %}
                        <td class="common">普通的</td>
                    {% elif i.grade == 'N' %}
                        <td class="necessary">必须的</td>
                    {% endif %}
                    <td>{{ i.title }}</td>
                    <td>{{ i.text }}</td>
                    <td>{{ i.start_time }}</td>
                    <td>{{ i.end_time }}</td>
                    {% if i.status == 'F' %}
                        <td class="underway">已完成</td>
                    {% elif i.status == 'U' %}
                        <td class="finish">进行中</td>
                    {% elif i.status == 'O' %}
                        <td class="overtime">已超时</td>
                    {% elif i.status == 'P' %}
                        <td class="plan">未开始</td>
                    {% endif %}
                    <td>
                        <!--完成或超时的记事不可选中完成按钮-->
                        {% if i.status == 'F' or i.status == 'O' %}
                            <button type="button" class="btn btn-success" disabled>完成
                                <i class="fa fa-check-square-o" style="font-size:20px"></i>
                            </button>
                        {% elif i.status == 'U' or i.status == 'P' %}
                            <button type="button" class="btn btn-success" onclick=finishNote("{{ i.id }}")>完成
                                <i class="fa fa-check-square-o" style="font-size:20px"></i>
                            </button>
                        {% endif %}
                        <button type="button" class="btn btn-danger" onclick=delNote("{{ i.id }}")>删除
                            <i class="fa fa-exclamation-circle" style="font-size:20px"></i>
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <button type="button" class="btn btn-primary btn-lg" onclick="$('#addModal').modal('show')">添加</button>
        <button type="button" class="btn btn-warning btn-lg" onclick="">批量操作</button>
    </div>

    <!--第二个页面,注意id要和选项卡定义的href一致-->
    <div id="recoverTab" class="tab-pane fade">
        <table id="recoverList" class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>正文</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>状态</th>
                <th>
                    <i class="fa fa-cog"></i>
                    操作
                </th>
            </tr>
            </thead>
            <tbody>
            {% for i in recover_notes %}
                <tr>
                    <td>{{ i.id }}</td>
                    <td>{{ i.title }}</td>
                    <td>{{ i.text }}</td>
                    <td>{{ i.start_time }}</td>
                    <td>{{ i.end_time }}</td>
                    <td class="danger">已删除</td>
                    <td>
                        <button type="button" class="btn btn-success" onclick=recoverNote("{{ i.id }}")>恢复
                            <i class="fa fa-check-square-o" style="font-size:20px"></i>
                        </button>
                        <button type="button" class="btn btn-danger" onclick=ruinNote("{{ i.id }}")>彻底删除
                            <i class="fa fa-exclamation-circle" style="font-size:20px"></i>
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <!--第三个页面,注意id要和选项卡定义的href一致-->
    <div id="logTab" class="tab-pane fade">
        <table id="logList" class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>ID</th>
                <th>操作</th>
                <th>时间</th>
            </tr>
            </thead>
            <tbody>
            {% for i in log %}
                <tr>
                    <td>{{ i.id }}</td>
                    <td>{{ i.note_id }}</td>
                    {% if i.operation == 'A' %}
                        <td class="add">新增</td>
                    {% elif i.operation == 'E' %}
                        <td class="edit">修改</td>
                    {% elif i.operation == 'R' %}
                        <td class="recover">恢复</td>
                    {% elif i.operation == 'D' %}
                        <td class="delete">删除</td>
                    {% elif i.operation == 'F' %}
                        <td class="finish">完成</td>
                    {% endif %}
                    <td>{{ i.record_time }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>


<!--添加笔记弹出框-->
<div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    <i class="fa fa-user-plus" style="font-size:28px"></i>
                    新增记事
                </h4>
            </div>
            <div class="modal-body">
                <form id="addNoteForm" action="" onsubmit="return false;">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">标题</span>
                        </div>
                        <label for="name"></label>
                        <input type="text" class="form-control" id="name" name="name" maxlength="10"
                               placeholder="标题最大长度为10个字符" required="required">
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">内容</span>
                        </div>
                        <label for="text"></label>
                        <input type="text" class="form-control" id="text" name="text" maxlength="20"
                               placeholder="内容最大长度为20个字符" required="required">
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">开始时间</span>
                        </div>
                        <label for="startTime"></label>
                        <input type="datetime-local" class="form-control" id="startTime" name="startTime"
                               placeholder="请选择开始时间" required="required">
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">结束时间</span>
                        </div>
                        <label for="endTime"></label>
                        <input type="datetime-local" class="form-control" id="endTime" name="endTime"
                               placeholder="请选择结束时间" required="required">
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">优先级</span>
                        </div>
                        <select class="form-control" name="grade">
                            <option value="I">重要的</option>
                            <option value="N">必须的</option>
                            <!--默认值-->
                            <option value="C" selected>普通的</option>
                        </select>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="submitNoteBtn">提交
                            <i class="fa fa-pencil-square-o" style="font-size:20px"></i>
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭
                            <i class="fa fa-times" style="font-size:20px"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!--修改笔记弹出框-->
<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    <i class="fa fa-wrench"> 修改记事</i>
                </h4>
            </div>
            <div class="modal-body">
                <form id="editNoteForm" action="" onsubmit="return false">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">记事序号</span>
                        </div>
                        <label for="id"></label>
                        <input type="text" class="form-control" id="id" name="id" required readonly>
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">标题</span>
                        </div>
                        <label for="names"></label>
                        <input type="text" class="form-control" id="names" name="names" required>
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">内容</span>
                        </div>
                        <label for="texts"></label>
                        <input type="text" class="form-control" id="texts" name="texts" required>
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">开始时间</span>
                        </div>
                        <label for="startTimes"></label>
                        <input type="datetime-local" class="form-control" id="startTimes" name="startTimes"
                               placeholder="请选择开始时间" required>
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">结束时间</span>
                        </div>
                        <label for="endTimes"></label>
                        <input type="datetime-local" class="form-control" id="endTimes" name="endTimes"
                               placeholder="请选择结束时间" required>
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">优先级</span>
                        </div>
                        <select class="form-control" name="grade">
                            <option value="I">重要的</option>
                            <option value="N">必须的</option>
                            <option value="C">普通的</option>
                        </select>
                    </div>


                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="editNoteBtn">提交
                            <i class="fa fa-pencil-square-o" style="font-size:20px"></i>
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭
                            <i class="fa fa-times" style="font-size:20px"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>

    $('#mainList').bootstrapTable({
        //点击行事件
        onDblClickRow: (row) => {
            if (row[6] !== '已完成') {
                $('#editModal').modal('show')
                $('#id').val(row[0])
                $('#names').val(row[2])
                $('#texts').val(row[3])
            }
        },
        //是否显示分页条
        pagination: true,
        //首页页码
        pageNumber: 1,
        //一页显示的行数
        pageSize: 10,
        //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
        paginationLoop: false,
        //选择每页显示多少行，数据过少时可能会没有效果
        pageList: [10, 20],
        //启用关键字搜索框
        search: true,
    })

    $('#recoverList').bootstrapTable({
        pagination: true,
        pageNumber: 1,
        pageSize: 10,
        paginationLoop: false,
        pageList: [10, 20],
        search: true,
    })

    $('#logList').bootstrapTable({
        pagination: true,
        pageNumber: 1,
        pageSize: 50,
        paginationLoop: false,
        pageList: [50, 100],
        search: false,
    })


    $('#submitNoteBtn').click(function () {
        var data = {}
        const t = $('#addNoteForm').serializeArray()
        $.each(t, function () {
            data[this.name] = this.value
        })
        for (const k in data) {
            if (data.hasOwnProperty(k) && data[k] === "") {
                return
            }
        }
        addNote(data)
    })

    $('#editNoteBtn').click(function () {
        var data = {}
        const t = $('#editNoteForm').serializeArray()
        $.each(t, function () {
            data[this.name] = this.value
        })
        for (const k in data) {
            if (data.hasOwnProperty(k) && data[k] === "") {
                return
            }
        }
        editNote(data)
    })
</script>
</body>
</html>